<template>
  <div class="app-container clearfix">  
    
<el-form ref="filterForm" :model="subscribeForm"  label-position="left" label-width="100px">
        <el-form-item label="文件名称" prop="drainageName">
          <el-input v-model="subscribeForm.drainageName" placeholder="标题" />
        </el-form-item>
        <el-form-item label="分组" prop="drainageGroupID">
          <el-input v-model="subscribeForm.drainageGroupID" placeholder="标题" />
        </el-form-item>
        <el-form-item label="文件简称" prop="drainageAliasName">
          <el-input v-model="subscribeForm.drainageAliasName" placeholder="文件简称" />
        </el-form-item>
        <el-form-item label="最大开启权限" prop="allowedPageNum">
          到文件第<el-input-number v-model="subscribeForm.allowedPageNum" @change="handleAllowedPageNumChange" :min="1" :max="10" label="资料页码"></el-input-number>页，须添加销售

        </el-form-item>
        <el-form-item label="客户标签" prop="drainageLabeleIDs">
          <el-tag
            :key="tag"
            v-for="tag in subscribeForm.drainageLabeleIDs"
            closable
            :disable-transitions="false"
            @close="handleRemovedLables(tag)">
            {{tag}}
          </el-tag>
          <el-input
              class="input-new-tag"
              v-if="inputLabelVisible"
              v-model="inputValue"
              ref="saveLabelInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showLabelsInput">+ 新标签</el-button>
        </el-form-item>
        <el-form-item label="销售代表" prop="drainageEmployeeIDs">
          <el-tag
            :key="tag"
            v-for="tag in subscribeForm.drainageEmployeeIDs"
            closable
            :disable-transitions="false"
            @close="handleRemovedEmployee(tag)">
            {{tag}}
          </el-tag>
          <el-input
              class="input-new-tag"
              v-if="inputEmployeeVisible"
              v-model="subscribeForm.employeeName"
              ref="saveEmployeeInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showEmployeeInput">+ 新销售</el-button>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="subscribeForm.remark" placeholder="备注" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubscribeSubmit()">确 定</el-button>
        <el-button type="primary" @click="handleSubscribeCannel()">取消</el-button>
      </span>
  </div>
</template>

<script>
import {saveDrainage} from '@/api/customer/drainage'



export default {
  name: 'gradeAdmin',
  components: {  },
  directives: {  },
  filters: {
  },
  data() {
    return {
      inputLabelVisible:false,
      inputEmployeeVisible:false,
      subscribeForm: {
        gradeName: "",
        allowedPageNum: 3,
        remark: "",
        gradeStatus:6
      }
    }
  },
  created() {
  },
  destroyed () {
  },
  methods: {
    handleSubscribeSubmit:function(){
      let _this = this;
      saveDrainage(_this.subscribeForm).then((response) => {
          if (response.code === 200) {
            _this.$router.push({ path: 'drainage'})
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handleAllowedPageNumChange:function(e){
      console.log("页码变动",e)
    },
    handleRemovedEmployee:function(){},
    handleRemovedLables:function(){},
    showLabelsInput:function(){
      this.inputLabelVisible = true
      this.$nextTick(_ => {
        this.$refs.saveLabelInput.$refs.input.focus();
      });
    },
    showEmployeeInput:function(){
      this.inputEmployeeVisible = true
      this.$nextTick(_ => {
        this.$refs.saveEmployeeInput.$refs.input.focus();
      });
    },
    handleFilter() {
      this.filterForm.page = 1
      this.getList()
    },
    handleSubscribeCannel:function(){
      this.$router.push({ path: 'drainage'})
    }
  }
}
</script>
<style>
.filter { float: left; width: 160px; padding: 20px; min-height: 600px; }
.article { float: left; width: 800px; }
.article-item { width: 800px; height: 200px; margin-right: 25px; }
.article-item-text { float: left; width:600px; }
.article-item-icon { float: right; width:200px; height:150px; padding-left: 50px; }
.article-item-icon img { width:100%; height:100%; border-radius: 10px; }
</style>